<script lang="ts" setup>
import type { FormInstance } from '@arco-design/web-vue'

const checkedTrue = ref(true)
const checkedArea = ref(true)

const visible = defineModel<boolean>('visible', { required: true })
const formRef = ref<FormInstance>()

const top3 = ref([
  {
    id: 1,
    key: 'time',
    name: '命中时间',
    type: true,
    disable: true,
  },
  {
    id: 2,
    key: 'rep_region',
    name: '请求 IP (地区)',
    type: checkedArea.value,
    disable: false,
  },
  {
    id: 3,
    key: 'url',
    name: 'URL',
    type: true,
    disable: true,
  },
])

const data = ref([
  {
    id: 5,
    key: 'name',
    name: '节点名称',
    type: true,
    disable: false,
  },
  // {
  //   id: 6,
  //   key: 'region',
  //   name: '站点区域',
  //   type: true,
  //   disable: false
  // },
  {
    id: 6,
    key: 'node_ip',
    name: '节点 IP ',
    type: true,
    disable: false,
  },
  {
    id: 7,
    key: 'waf_id',
    name: '规则 ID',
    type: true,
    disable: false,
  },
  {
    id: 8,
    key: 'waf_name',
    name: '规则名称',
    type: true,
    disable: false,
  },
  {
    id: 9,
    key: 'module',
    name: '规则类型',
    type: true,
    disable: false,
  },
  {
    id: 10,
    key: 'action',
    name: '执行策略',
    type: true,
    disable: false,
  },
  {
    id: 11,
    key: 'method',
    name: '请求方法',
    type: true,
    disable: false,
  },
  {
    id: 12,
    key: 'http_version',
    name: 'HTTP 版本',
    type: true,
    disable: false,
  },
  // {
  //   id: 13,
  //   key: 'node_ip',
  //   name: '节点 IP ',
  //   type: true,
  //   disable: false
  // },
  {
    id: 14,
    key: 'browser',
    name: '浏览器',
    type: true,
    disable: false,
  },
])
const action = ref([
  {
    id: 15,
    key: 'actions',
    name: '操作',
    type: true,
    disable: false,
  },
])
function handleChange(_data: any) {
  data.value = _data
}

const columns = reactive([
  {
    title: 'Name',
    dataIndex: 'name',
    slotName: 'name',
  },
  {
    title: 'Icon',
    dataIndex: 'icon',
    slotName: 'icon',
    width: 20,
  },
])

async function handleSubmit() {
  top3.value[1].type = checkedArea.value
  const objArray = [...top3.value, ...data.value, ...action.value]
  localStorage.setItem('NodeLogSort', JSON.stringify(objArray))
  const error = await formRef.value?.validate()

  if (error)
    return false
}
function handleClose() {}

onMounted(() => {
  const NodeLogSort = localStorage.getItem('NodeLogSort')
  if (NodeLogSort) {
    const sortList = JSON.parse(NodeLogSort)
    checkedArea.value = sortList[1].type
    sortList.splice(0, 3)
    sortList.splice(-1)
    data.value = sortList
  }
})
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    title="自定义列表字段"
    :width="480"
    :mask-closable="false"
    :before-ok="handleSubmit"
    :before-close="handleClose"
  >
    <div class="fixed-column">
      <div class="fixed-row border-bottom-color">
        <a-checkbox
          v-model="checkedTrue"
          disabled
        >
          命中时间
        </a-checkbox>
      </div>
      <div class="fixed-row border-bottom-color">
        <a-checkbox
          v-model="checkedArea"
          :disabled="false"
        >
          请求 IP (地区)
        </a-checkbox>
      </div>
      <div class="fixed-row">
        <a-checkbox
          v-model="checkedTrue"
          disabled
        >
          URL
        </a-checkbox>
      </div>
    </div>
    <a-table
      :columns="columns"
      :data="data"
      :draggable="{}"
      :show-header="false"
      :pagination="false"
      :total="20"
      style="border-radius: 0px"
      @change="handleChange"
    >
      <template #name="{ record }">
        <a-checkbox
          v-model="record.type"
          :disabled="record.disable"
        >
          {{ record.name }}
        </a-checkbox>
      </template>
      <template #icon="{ record }">
        <i-icons-draggable
          v-if="record.id > 3"
          size="3"
        />
      </template>
    </a-table>
  </resource-dialog>
</template>

<style lang="less" scoped>
.fixed-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 4px 4px 0 0;
  border: 1px solid var(---color-border-1, #f3f4f7);
  border-bottom: none;
  .fixed-row {
    display: flex;
    padding: 11px 16px 18px 16px;
    align-items: center;
    gap: 8px;
    align-self: stretch;

    color: var(---color-text-2, #393c40);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
  }
  .border-bottom-color {
    border-bottom: 1px solid var(---color-border-1, #f3f4f7);
  }
}
</style>
